<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}">
    <div v-loading="loading" class="sign-detail-container mobile-margin">
      <div class="sign-detail-content small-padding">
        <Title title="基础信息" style="font-size:16px; margin-bottom:7px"/>
        <baseInfo ref="userInfo" :base-info="formInfo"/>
        <Title title="询价列表" style="font-size:16px; margin:10px 0 10px" class="price-title"/>
        <queryPriceList ref="queryPriceList" :is-approval-status="isApprovalStatus" :is-creator="isCreator" :show-price-btn="showPriceBtn" :fly-query-id="Number(id)" :status="formInfo.status" @updateInfo="updateInfo"/>
        <fixed-pagination>
          <div class="center">
            <!-- 1询价中 2已作废 3已完成-->
            <el-button v-if="showPriceBtn" type="primary" size="small" class="submit-btn" @click="toFinish()" >完成询价</el-button>
            <el-button v-if="(formInfo.status === 2 || formInfo.status === 3) && hasRouteAuth('crm:flyPrice:create')" type="primary" size="small" class="submit-btn" @click="toCreate()">复制</el-button>
            <el-button v-if="showPriceBtn" size="small" plain class="revoke-btn" @click="toRevoke()">作废</el-button>
            <el-button class="back-btn cancel-btn-style" size="small" @click="toBack()">返回</el-button>
          </div>
        </fixed-pagination>
        <log ref="logs" :id="id" :is-update="isUpdate"/>
        <el-image :src="hoverSrc" class="hover-img"/>
      </div>
    </div>
  </div>
</template>
<script>
// 组件
import ListTab from '@/components/ListTab';
import log from '../components/log';
import baseInfo from '../components/baseInfo';
import queryPriceList from '../components/queryPriceList';
import Title from '@/components/Title';
// api methods
import { queryPriceInfo, editPriceStatus } from '@/api/flyPrice';
import { hasRouteAuth } from '@/utils/permission';
// img
import emptyIcon from '@/assets/home/emptyIcon.png';
import progress from '@/assets/auditProcess/flyPrice_process.png';
import finish from '@/assets/auditProcess/process_status_4.png';
import revoke from '@/assets/auditProcess/process_status_3.png';
// mixins
import { showModal } from '@/utils/message';
import { mapState } from 'vuex';

export default {
  components: {
    ListTab,
    baseInfo,
    Title,
    log,
    queryPriceList
  },
  data() {
    return {
      id: '',
      hasRouteAuth,
      progress,
      finish,
      revoke,
      emptyIcon,
      isUpdate: false,
      formInfo: {},
      activeTab: '',
      loading: false,
      cancelToken: null
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    hoverSrc() {
      switch (this.formInfo.status) {
        case 1:return this.progress;
        case 2:return this.finish;
        case 3:return this.revoke;
      }
    },
    isCreator() {
      return this.formInfo.creatorId === this.userInfo.id;
    },
    isApprovalStatus() {
      return this.formInfo.status === 1;
    },
    showPriceBtn() {
      return this.isApprovalStatus && this.isCreator;
    }
  },
  created() {
    this.id = Number(this.$route.query.id);
    this.getInfo();
  },
  methods: {
    // 获取详情
    getInfo() {
      this.loading = true;
      queryPriceInfo(this.id).then(res => {
        this.loading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.formInfo = res.data;
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    },
    updateInfo() {
      this.getInfo();
      this.$refs['queryPriceList'].updateInfo();
      this.isUpdate = !this.isUpdate;
    },
    // 再次发起（复制）
    toCreate() {
      this.$router.push({
        name: 'flyPriceCreate',
        query: {
          id: this.id,
          createNew: true
        }
      });
    },
    // 撤销
    toRevoke() {
      showModal('请确认是否作废询价，作废后用户将不可报价', '', {
        iconClass: 'del-icon'
      }).then(() => {
        const data = {
          id: this.id,
          status: 3
        };
        editPriceStatus(data).then(res => {
          this.updateInfo();
        }).catch(err => { console.log(err); });
      }).catch(() => {
        return false;
      });
    },
    // 完成
    async toFinish() {
      const existAuditAccount = await this.$refs.queryPriceList.existAuditAccount();
      if (existAuditAccount) {
        showModal('当前询价存在待审核/待确认的账号请确认是否完成询价?', '', {
          iconClass: 'del-icon'
        }, true).then(() => {
          this.complete();
        }).catch(() => {
          this.updateInfo();
        });
      } else {
        showModal('请确认是否完成询价?', '', {
          iconClass: 'del-icon'
        }).then(() => {
          this.complete();
        });
      }
    },
    complete() {
      const data = {
        id: this.id,
        status: 2
      };
      editPriceStatus(data).then(res => {
        this.updateInfo();
      }).catch(err => { console.log(err); });
    },
    toBack() {
      this.$router.push({
        name: 'flyPrice'
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.mobile-detail-wrap {
  .sign-detail-container {
    border-radius: 6px;
  }
  .mobile-margin {
    margin: 12px 12px 100px !important;
  }
  .price-title {
    margin-bottom: 0 !important;
  }
  &::v-deep {
    .table-list-tabs-item {
      margin: 0 12px !important;
    }
    .table-list-tabs-item:first-child {
      margin-left: 0 !important;
    }
    .list-tab {
      padding-right: 0 !important;
    }
    .mobile-item-content {
      padding-top: 8px !important;
    }
    .filter {
      margin-bottom: 0px !important;
    }
    .flyPrice-list {
      margin-top: 8px !important;
    }
    .price-btn-group {
      margin-bottom: 8px !important;
    }
  }
}
.sign-detail-container{
		margin:	16px;
		background: #fff;
		min-height: calc(100vh - 64px);
		.sign-detail-content{
      position: relative;
			padding: 16px 24px 56px;
		}
    .revoke-btn {
      width: 80px;
      height: 32px;
      background: rgba(255,78,95,0.10);
      border: 1px solid #ff4e5f;
      border-radius: 4px;
      color: #FF4E5F;
    }
    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      .text {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #999999;
        line-height: 20px;
        margin-top: 10px;
      }
      .blue {
        color: #406ef4;
      }
      img {
        width: 120px;
      }
    }
    .hover-img{
      position: absolute;
      width: 80px;
      height: 80px;
      right: 56px;
      top: 33px;
    }
	}
</style>
